<template>
    <div class="insert_main">
        <van-cell
            title="预约时间"
            value="2019-10-10 18:00"
            is-link
            @click="showPicker = true"
        />
        <van-cell
            style="margin-top:10px"
            title="患病时长"
            :value="stepContext"
            is-link
            @click="showStep = true"
        />
        <van-cell style="margin-top:10px" title="病情描述" />
        <div style="position:relative">
            <textarea
                class="cell_desc"
                @input="fontChange"
                maxlength="200"
                placeholder="请详细描述您的病情或需要什么帮助，医生将更好为您解答问题（最少输入10个字）"
            >
            </textarea>
            <span class="fixed_count">{{ fontCount }}/200</span>
        </div>
        <div class="upload_main">
            <van-uploader
                v-model="fileList"
                :class="fileList.length < 1 && 'uploader'"
                multiple
                :after-read="afterRead"
            />
            <div class="right_info" v-if="fileList.length < 1">
                <p>添加图片<span class="tags">（非必填）</span></p>
                <p>
                    上传病情、检查图片、CT、药品、患处等照片方便医生确认，照片仅自己与医生可见，请放心上传。
                </p>
            </div>
        </div>
        <div class="tips">医生将在您提交问题的24小时内回复您</div>
        <div class="agree">
            <van-checkbox class="check" v-model="agreed"
                >我已阅读并同意 <span>《知情同意书》</span></van-checkbox
            >
        </div>
        <!-- picker -->
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker v-model="currentDate" type="datetime" />
        </van-popup>
        <van-popup v-model="showStep" position="bottom">
            <van-picker
                :columns="columns"
                @confirm="stepChange"
                @cancel="showStep = false"
                show-toolbar
                title="患病时长"
            />
        </van-popup>
        <van-button class="bg_diy" round>立即预约</van-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentDate: "",
            agreed: true,
            showPicker: false,
            fileList: [
                // { url: "https://img.yzcdn.cn/vant/leaf.jpg" },
                // // Uploader 根据文件后缀来判断是否为图片文件
                // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                // { url: "https://img.yzcdn.cn/vant/leaf.jpg" }
            ],
            showStep: false,
            fontCount: 0,
            stepContext: "",
            columns: [
                "1周内",
                "半个月内",
                "一个月内",
                "三个月内",
                "半年内",
                "一年内",
                "一年以上"
            ]
        };
    },
    methods: {
        // 上传之后的钩子
        afterRead() {},
        stepChange(e) {
            this.stepContext = e;
            this.showStep = false;
        },
        fontChange(e) {
            const LENGTH = e.target.value.length;
            this.fontCount = LENGTH;
            if (LENGTH >= 200) {
                this.fontCount = 200;
            }
        }
    }
};
</script>

<style lang="less" scoped>
.cell_desc {
    font-size: 14px;
    width: 100%;
    height: 120px;
    padding: 10px;
    box-sizing: border-box;
    resize: none;
    &::placeholder {
        color: #999;
    }
}
.fixed_count {
    position: absolute;
    right: 10px;
    bottom: 16px;
    font-size: 14px;
    color: #999;
}
.upload_main {
    width: 100%;
    margin-top: 10px;
    background: #fff;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
    min-height: 120px;
    .uploader {
        width: 80px;
        float: left;
    }
    .right_info {
        width: calc(100% - 80px);
        height: 100%;
        float: left;
        p {
            margin: 0;
            color: #333;
            margin-top: 10px;
            span {
                font-size: 12px;
                color: #999;
            }
            &:nth-of-type(2) {
                color: #999;
                font-size: 12px;
                margin-top: 5px;
            }
        }
    }
}

.tips {
    font-size: 14px;
    width: 100%;
    color: #999;
    text-align: center;
    margin-top: 10px;
}
.agree {
    font-size: 14px;
    color: #666;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 30px;
    .check {
        height: 40px;
        line-height: 40px;
    }
    span {
        color: #00aac6;
    }
}

.bg_diy {
    background: #00aac6;
    color: #fff;
    border-color: #00aac6;
    width: 80vw;
    margin: 20px 10vw;
    font-size: 16px;
}
</style>
